<template>
	<view class="pagesBox">
		<view class="menuBox">
			<block v-for="(item,index) in menuList" :key="index">
				<view class="menuItem" @click="toPage(item,index)">
					<view class="menuTitle">{{item.title}}</view>
					<view class="menuRight">
						<view class="imageBox" v-if="item.title == '头像'">
							<image :src="headInfo.avatar_image" style="width: 100rpx;height: 100rpx;border-radius: 50%;"></image>
							<image src="/static/changeHander.png" style="width: 36rpx;height: 36rpx;" class="changeBox"></image>
						</view>
						<view class="menuCount" v-if="item.title == '昵称'">{{headInfo.nick_name}}</view>
						<view class="menuCount" v-if="item.title == '手机号'">{{headInfo.phone}}</view>
						<view class="menuCount" v-if="item.title == '会员身份'">{{headInfo.identity_text}}</view>
						<view class="menuCount" v-if="item.title == '会员说明'">{{headInfo.identity_content}}</view>
						<view class="menuCount" v-if="item.title == '登录密码'">修改登录密码</view>
						<view class="menuCount" v-if="item.title == '支付密码'">修改支付密码</view>
						<uni-icons v-if="item.isShow" type="right" size="16" color="#A1A5AA"></uni-icons>
					</view>
				</view>
			</block>
		</view>
		<view class="submitBox">
			<view class="btn btn1" hover-class="btnHover" @click="backLogin">
				退出登录
			</view>
		</view>
		<!-- 修改姓名 -->
		<u-popup v-model="showName" mode="center" closeable safe-area-inset-bottom>
			<view class="popupTip">
				<view class="tipTitle">请输入昵称</view>
				<view class="myInput">
					<input v-model="changeName" placeholder="请输入昵称" style="height: 76rpx;"/>
				</view>
				<view style="width: 100%;">
					<my-submitBtn :isFixed="false" bgColor="#fff" btnText="确认修改" @click="submitBefore"></my-submitBtn>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl:this.$baseUrl,
				menuList: [
					{title: "头像",isShow:false}, 
					{title: "昵称",isShow:true}, 
					{title: "手机号",isShow:false}, 
					{title: "会员身份",isShow:false}, 
					// {title: "会员说明",isShow:false}
					{title: "登录密码",isShow:true},
					{title: "支付密码",isShow:true}
				],
				headInfo:{},
				showName:false,
				changeName:''
			}

		},
		onLoad() {
			this.getUserInfo()
		},
		methods: {
			async getUserInfo(){
				let res = await uni.$http('POST','user/userInfo');
				if(res.code == 1){
					this.headInfo = res.data;
				}else if(res.msg.includes('登录')){
					uni.removeStorageSync('token')
					this.token = -1;
				}
			},
			uploadImage(){
				uni.chooseImage({
					sourceType:['album'],
					count: 1, 
					success: (chooseImageRes) => {
						console.log(chooseImageRes);
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: this.$baseUrl+'/api/user/edithead', 
							filePath: tempFilePaths[0],
							name: 'file',
							header: {'token':uni.getStorageSync('token')},
							success: (uploadFileRes) => {
								let result = JSON.parse(uploadFileRes.data)
								console.log(result);
								if(result.code == 1){
									this.getUserInfo()
								}else{
									uni.$u.toast(result.msg)
								}
							}
						});
					}
				})
			},
			submitBefore(){
				if(this.changeName == ''){
					uni.$u.toast('请填写昵称')
				}else if(this.changeName.length>8){
					uni.$u.toast('昵称不可以超过8位数')
				}else{
					if(this.time){
						clearTimeout(this.time)
						this.time = '';
					}
					uni.showLoading({
						title:"加载中",
						mask: true
					})
					this.time = setTimeout(()=>{
						this.submit()
					},700)
				}
			},
			async submit(){
				let res = await uni.$http('POST','user/editUserMessage',{nick_name:this.changeName})
				uni.hideLoading()
				uni.$u.toast(res.msg)
				if(res.code == 1){
					this.showName = false;
					this.changeName = "";
					this.getUserInfo()
				}else{
					uni.$u.toast(res.msg)
				}
			},
			toPage(item,index){
				if(item.title == '头像'){
					this.uploadImage()
				}else if(item.title == '昵称'){
					// this.changeName = this.headInfo.nick_name;
					this.showName = true;
				}else if(item.title == '登录密码'){
					uni.navigateTo({
						url:"/pagesIndex/changePwd/changePwd?type=1"
					})
				}else if(item.title == '支付密码'){
					uni.navigateTo({
						url:"/pagesIndex/changePwd/changePwd?type=2"
					})
				}
			},
			backLogin(){
				uni.removeStorageSync("token");
				uni.redirectTo({
					url:"/pages/index/auth/bindPhone"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.pagesBox{
	padding: 12rpx 24rpx;
	.menuBox{
		padding: 16rpx;
		padding-bottom: 0%;
		background-color: #fff;
		border-radius: 16rpx;
		.menuItem {
			min-height: 88rpx;
			color: #111111 !important;
			font-size: 30rpx;
			font-weight: normal !important;
			border-bottom: 2rpx solid #eee;
			padding: 16rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			&:last-of-type{
				border-bottom: 2rpx solid #fcfdff;
			}
			.menuTitle {
				font-weight: 400;
				font-size: 28rpx;
				color: #000;
				flex-shrink: 0;
				margin-right: 16rpx;
			}
			.menuRight{
				display: flex;
				align-items: center;
				.imageBox{
					font-size: 0%;
					
					overflow: hidden;
					display: flex;
					justify-content: center;
					align-items: center;
					position: relative;
					.changeBox{
						border-radius: 50%;
						position: absolute;
						bottom: 0%;
						right: 0;
					}
				}
				.menuCount{
					font-weight: 400;
					font-size: 28rpx;
					color: #A1A5AA;
					text-align: end;
				}
			}
			
		}
	}
	.submitBox{
		width: 100%;
		height: 130rpx;
		margin-top: 46rpx;
		letter-spacing: 2rpx;
		display: flex;
		justify-content: space-around;
		.btn{
			width: 100%;
			height: 80rpx;
			color: #000;
			font-size: 30rpx;
			font-weight: 600;
			border-radius: 12rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.btn1{
			background: #fff;
		}
		.btnHover{
			color: #ccc;
		}
	}
	.popupTip{
		width: 80vw;
		height: 400rpx;
		padding: 24rpx 32rpx;
		background-color: #FFFFFF;
		border-radius: 12rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		.tipTitle{
			font-weight: 600;
			font-size: 34rpx;
			color: #000;
			text-align: center;
		}
		.myInput{
			width: 90%;
			height: 76rpx;
			line-height: 76rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #000;
			border: 2rpx solid #A1A5AA;
			border-radius: 16rpx;
			padding: 0 24rpx;
			margin: 32rpx 0;
		}
		.btnBox{
			width: 100%;
			margin-top: 16rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			.btn{
				width: 90%;
				height: 80rpx;
				font-weight: 600;
				font-size: 30rpx;
				color: #FFFFFF;
				background: linear-gradient( 163deg, #1E4369 0%, #0457ca 100%);
				border-radius: 40rpx;
				margin-left: 12rpx;
				letter-spacing: 4rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.hoverBtn{
				background: linear-gradient( 163deg, #0457ca 0%, #1E4369 100%);
			}
		}
	}
}
</style>
<style>
	page{
		background-color: #F7F8FA;
	}
</style>